/* components */
import { ConnectorListViewCardItem } from '@src/modules/connector/view/list/components'
import NoDataViewNew from '@src/component/common/NoDataViewNew';
/* model */
import { ConnectorModuleComponentNameEnum } from '@src/modules/connector/model'
/* scss */
import '@src/modules/connector/view/list/components/card/index.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'
/* types */
import { TriggerSettingCardItem } from '@src/modules/connector/types'

export type ConnectorListViewCardListProps = {
  value: TriggerSettingCardItem[];
}

export interface ConnectorListViewCardListSetupState {
  
}

export enum ConnectorListViewCardListEmitEventNameEnum {
  Input = 'input',
  Update = 'update',
  Edit = 'edit',
  Delete = 'delete',
  Log = 'log'
}

export type ConnectorListViewCardListInstance = ComponentInstance & ConnectorListViewCardListSetupState
export type ConnectorListViewCardListVM = ComponentRenderProxy<ConnectorListViewCardListProps> & CommonComponentInstance & ConnectorListViewCardListInstance

export default defineComponent({
  name: ConnectorModuleComponentNameEnum.ConnectorListViewCardList,
  emits: [
    ConnectorListViewCardListEmitEventNameEnum.Input,
    ConnectorListViewCardListEmitEventNameEnum.Update,
    ConnectorListViewCardListEmitEventNameEnum.Edit,
    ConnectorListViewCardListEmitEventNameEnum.Delete,
    ConnectorListViewCardListEmitEventNameEnum.Log
  ],
  props: {
    value: {
      type: Array as PropType<TriggerSettingCardItem[]>,
      default: () => [],
    },
    loading:{
      type:Boolean,
      default: true
    },
    edit: {
      type: Boolean,
      default: false,
    },
    delete: {
      type: Boolean,
      default: false,
    }
  },
  setup(props: ConnectorListViewCardListProps, { emit }) {
    
    const onUpdateHandler = (value: TriggerSettingCardItem) => {
      emit(ConnectorListViewCardListEmitEventNameEnum.Update, value)
    }
    
    const onEditHandler = (value: TriggerSettingCardItem) => {
      emit(ConnectorListViewCardListEmitEventNameEnum.Edit, value)
    }
    
    const onDeleteHandler = (value: TriggerSettingCardItem) => {
      emit(ConnectorListViewCardListEmitEventNameEnum.Delete, value)
    }
    
    const updateState = (state:number,item:TriggerSettingCardItem)=>{
      item.enable = state
    }
    const onLogHandler = (value: TriggerSettingCardItem)=>{
      emit(ConnectorListViewCardListEmitEventNameEnum.Log, value)
    }

    return {
      onUpdateHandler,
      onEditHandler,
      onDeleteHandler,
      updateState,
      onLogHandler
    }
    
  },
  render(h: CreateElement) {
    const directives = [{ name: 'loading', value: this.loading }]
    return (
      <div class="connector-list-view-card-list-container" {...{ directives }}>
        <div class={ConnectorModuleComponentNameEnum.ConnectorListViewCardList}>
          {
            this.value.length==0 && !this.loading ?
            <div style="display:flex;width:100%;justify-content:center;">
              <no-data-view-new></no-data-view-new>
            </div>
            :
            this.value.map(item => {
              return (
                <ConnectorListViewCardItem 
                  edit={this.edit}
                  delete={this.delete}
                  key={item.id}
                  value={item}
                  onDelete={this.onDeleteHandler}
                  onEdit={this.onEditHandler}
                  onUpdate={this.onUpdateHandler}
                  onUpdateState={(state:number)=>{this.updateState(state,item)}}
                  onLog={this.onLogHandler}
                >
                </ConnectorListViewCardItem>
              )
            })
          }
        </div>
      </div>
    )
  },
  components:{
    [NoDataViewNew.name]:NoDataViewNew
  }
})
